<script lang="ts">
  import { realtime } from "../stores";

  import Title from "../../../components/Title/Title.svelte";
  import { onMount, onDestroy } from "svelte";

  let scrollBox;
  let container;
  let affix;
  let timer: any;

  function roll(t) {
    scrollBox.scrollTop = 0;
    affix.innerHTML = container.innerHTML;
    rollStart(t);
  }

  function rollStart(t) {
    rollStop();
    container.scrollHeight;
    timer = setInterval(() => {
      if (scrollBox.scrollTop >= container.scrollHeight) {
        scrollBox.scrollTop = 0;
      } else {
        scrollBox.scrollTop = scrollBox.scrollTop + 1;
      }
    }, t);
  }

  function rollStop() {
    timer && clearInterval(timer);
  }

  onMount(async () => {
    await realtime.get();
    scrollBox.scrollTop = 150;
    roll(80);
  });

  onDestroy(() => rollStop());
</script>

<div class="flex flex-col h-full">
  <Title title="实时报警数据" />
  <div class="flex-1 flex flex-col p-1 w-full overflow-hidden">
    <div
      class="flex text-center text-white bg-color-08418C text-sm 2xl:text-xl 3xl:text-3xl 4xl:text-4xl rounded-sm 3xl:rounded-xl"
    >
      <div class="basis-1/3 truncate">设备名称</div>
      <div class="basis-1/5 truncate">设备种类</div>
      <div class="basis-1/5 truncate">设备状态</div>
      <div class="basis-1/3 truncate">运行时间/min</div>
    </div>
    <!-- svelte-ignore a11y-mouse-events-have-key-events -->
    <div
      class="flex-1 overflow-hidden"
      bind:this={scrollBox}
      on:mouseover={rollStop}
      on:mouseout={() => {
        rollStart(60);
      }}
    >
      {#if $realtime.length > 0}
        <div class="" bind:this={container}>
          {#each $realtime as row}
            <div
              class="flex text-center text-white text-xs 2xl:text-lg 3xl:text-2xl 4xl:text-3xl rounded-md 3xl:rounded-xl msg-container"
            >
              <div class="basis-1/3 truncate">{row.name}</div>
              <div class="basis-1/5 truncate">{row.type}</div>
              <div class="basis-1/5 truncate">{row.status}</div>
              <div class="basis-1/3 truncate">{row.timer}</div>
            </div>
          {/each}
        </div>
      {:else}
        <div
          class="text-center text-white text-xs 2xl:text-lg 3xl:text-2xl 4xl:text-3xl rounded-md 3xl:rounded-xl msg-container"
        >
          暂无数据
        </div>
      {/if}
      <div bind:this={affix} />
    </div>
  </div>
</div>

<style>
  .bg-color-08418C {
    line-height: 1.75 !important;
    background: linear-gradient(
      90deg,
      #08418c 0%,
      #0059cf 12.5%,
      #08418c 25%,
      #08418c 37.5%,
      #0059cf 50%,
      #08418c 62.5%,
      #08418c 75%,
      #0059cf 87.5%,
      #08418c 100%
    );
  }

  .msg-container {
    line-height: 1.75 !important;
  }

  .msg-container:nth-child(2n + 1) {
    background: linear-gradient(
      90deg,
      #032c5b 0%,
      #014aa9 12.5%,
      #032c5b 25%,
      #032c5b 37.5%,
      #014aa9 50%,
      #032c5b 62.5%,
      #032c5b 75%,
      #014aa9 87.5%,
      #032c5b 100%
    );
  }
</style>
